<template>
  <div class="user-info-card">
    <div class="user-info-card__header">
      <Avatar :src="user?.avatar || defaultAvatar" :size="64" />
      <div class="user-info-card__header-info">
        <h3 class="user-info-card__name">{{ user?.nickName || user?.userName || '未知用户' }}</h3>
        <p class="user-info-card__account">{{ user?.userName }}</p>
        <div class="user-info-card__status">
          <Badge :status="user?.status === '0' ? 'success' : 'error'" />
          <span>{{ user?.status === '0' ? '正常' : '停用' }}</span>
        </div>
      </div>
    </div>
    
    <Divider />
    
    <div class="user-info-card__content">
      <div class="user-info-card__item">
        <Icon icon="ant-design:user-outlined" />
        <span class="user-info-card__label">用户类型</span>
        <span class="user-info-card__value">{{ getUserTypeText(user?.userType) }}</span>
      </div>
      
      <div class="user-info-card__item" v-if="user?.phone">
        <Icon icon="ant-design:phone-outlined" />
        <span class="user-info-card__label">手机号码</span>
        <span class="user-info-card__value">{{ user.phone }}</span>
      </div>
      
      <div class="user-info-card__item" v-if="user?.email">
        <Icon icon="ant-design:mail-outlined" />
        <span class="user-info-card__label">邮箱地址</span>
        <span class="user-info-card__value">{{ user.email }}</span>
      </div>
      
      <div class="user-info-card__item" v-if="user?.sex">
        <Icon icon="ant-design:team-outlined" />
        <span class="user-info-card__label">性别</span>
        <span class="user-info-card__value">{{ getSexText(user.sex) }}</span>
      </div>
      
      <div class="user-info-card__item" v-if="user?.post?.name">
        <Icon icon="ant-design:apartment-outlined" />
        <span class="user-info-card__label">岗位</span>
        <span class="user-info-card__value">{{ user.post.name }}</span>
      </div>
      
      <div class="user-info-card__item" v-if="user?.profile">
        <Icon icon="ant-design:file-text-outlined" />
        <span class="user-info-card__label">个人简介</span>
        <span class="user-info-card__value">{{ user.profile }}</span>
      </div>
      
      <div class="user-info-card__item" v-if="user?.login_date">
        <Icon icon="ant-design:clock-circle-outlined" />
        <span class="user-info-card__label">最后登录</span>
        <span class="user-info-card__value">{{ formatDate(user.login_date) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Avatar, Badge, Divider } from 'ant-design-vue'
import Icon from '@/components/Icon/Icon.vue'
import defaultAvatar from '@/assets/images/header.jpg'
import { formatToDateTime } from '@/utils/core/DateUtil'

defineOptions({ name: 'UserInfoCard' })

const props = defineProps({
  user: {
    type: Object,
    default: null
  }
})

const getUserTypeText = (userType) => {
  switch (userType) {
    case '00':
      return '超级管理员'
    case '01':
      return '普通用户'
    default:
      return '未知'
  }
}

const getSexText = (sex) => {
  switch (sex) {
    case '0':
      return '男'
    case '1':
      return '女'
    case '2':
      return '未知'
    default:
      return '未知'
  }
}

const formatDate = (date) => {
  if (!date) return '-'
  return formatToDateTime(date)
}
</script>

<style scoped>
.user-info-card {
  width: 320px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-info-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.user-info-card__header-info {
  flex: 1;
  min-width: 0;
}

.user-info-card__name {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-info-card__account {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #8c8c8c;
  line-height: 1.2;
}

.user-info-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8c8c8c;
}

.user-info-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-info-card__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.user-info-card__item .anticon {
  color: #1890ff;
  font-size: 14px;
  flex-shrink: 0;
}

.user-info-card__label {
  font-size: 13px;
  color: #8c8c8c;
  min-width: 60px;
  flex-shrink: 0;
}

.user-info-card__value {
  font-size: 13px;
  color: #262626;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 